<template>
  <div>
    <!-- 地图容器 -->
    <baidu-map class="baidu-map" :style="'height:' + fullHeight + 'px;'" ak="rGCdXT1h8xgmi6jX0mfQV6SIoQ5lyPgB" :center="center" scroll-wheel-zoom>
      <!-- 搜索区域 -->
      <div class="search">
        <el-input v-model="searchData" style="z-index: 1000; width: 500px" clearable placeholder="请输入搜索地址">
          <el-button slot="append" icon="el-icon-search" type="primary" @click="search"></el-button>
        </el-input>
      </div>

      <div>
        <!-- 地图视图区域 -->
        <bm-view style="width: 100%; height: 100%"></bm-view>
        <!-- 定位 -->
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" @locationSuccess="dinwei" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <!-- 全景 -->
        <bm-panorama></bm-panorama>
      </div>
    </baidu-map>
  </div>
</template>

<script>
import { BaiduMap, BmView, BmGeolocation, BmPanorama } from 'vue-baidu-map'

export default {
  data() {
    return {
      center: '广西壮族自治区',
      zoom: 3,
      searchData: '', //搜索地图关键字
      fullHeight: document.documentElement.clientHeight,
      timer: false,
    }
  },
  components: {
    BaiduMap,
    BmView,
    BmGeolocation,
    BmPanorama,
  },
  created() {
    this.get_bodyHeight()
  },
  mounted() {},
  watch: {
    fullHeight(val) {
      //监控浏览器高度变化
      if (!this.timer) {
        this.fullHeight = val
        this.timer = true
        let that = this
        setTimeout(function () {
          that.timer = false
        }, 400)
      }
    },
  },
  methods: {
    get_bodyHeight() {
      //动态获取浏览器高度
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })()
      }
    },
    dinwei(val) {
      //   console.log(val, '哈哈')
    },
    search() {
      this.center = this.searchData
    },
  },
}
</script>

<style scoped lang="less">
.baidu-map {
  width: 100%;
  position: relative;
  .search {
    position: absolute;
    left: 50%;
    top: 20px;
    opacity: 0.9;
    transform: translate(-50%, 0);
  }
}
</style>